<template lang="html">
  <div class="header">
    <div class="default-visible" v-show="this.isShowDefaultBack">
      <router-link class="back-link" to="/">
        <div class="visi-back-box">
          <span class="iconfont visi-back">&#xe625;</span>
        </div>
      </router-link>
    </div>
    <div class="default-hidden" v-show="!this.isShowDefaultBack">
      <router-link class="back-link" to="/">
        <span class="iconfont back">&#xe625;</span>
      </router-link>
      <p class="title">景点详情</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      isShowDefaultBack: false
    }
  },
  methods: {
    scrollHandel () {
      const top = document.body.scrollTop
      console.log(top)
      console.log(111)
    }
  },
  // 当使用keep-alive的时候就可以使用activeted钩子
  activeted () {
    window.addEventListener('scroll', this.scrollHandel)
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollHandel)
  }
}
</script>

<style lang="stylus" scoped>
  .back-link
    color: #fff
  .header
    position: absolute
    width: 100%
    top: 0
    .default-visible
      width: 100%
      height: .88rem
      text-align: center
      color: #fff
      .visi-back-box
        box-sizing: border-box
        border-radius: 50%
        background: rgba(33,33,33,0.3)
        width: .64rem
        height: .64rem
        line-height: .64rem
        margin: .12rem 0 0 .12rem
    .default-hidden
      height: .88rem
      line-height: .88rem
      text-align: center
      font-size: .32rem
      color: #fff
      background: #00bcd4
      position: relative
      .back
        position: absolute
        left: .22rem
</style>
